<template>
  <div>
    <button @click="flag = !flag">点击显示和隐藏</button>

    <hr />

    <!-- vue提供的一个内置的标签  -->
    <transition
      appear
      leave-active-class="animate__backOutLeft"
      enter-active-class="animate__backInDown"
    >
      <h3 v-show="flag" class="animate__animated">这是根组件</h3>
    </transition>
  </div>
</template>

<script>
import 'animate.css'

export default {
  data() {
    return {
      flag: true
    }
  }
}
</script>

<style lang="less" scoped>
button {
  margin: 20px;
}

h3 {
  background-color: #369;
  color: #fff;
  width: 210px;
  text-align: center;
  line-height: 58px;
}
</style>
